<template>
  <div class="login-page">
    <el-form ref="ruleFormRef" class="login-form" :model="formOptions" :rules="rules" label-width="70px">
        <el-form-item prop="userName" label="用户名">
          <el-input v-model="formOptions.userName" />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="formOptions.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">登 录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import { getCurrentInstance } from 'vue'
  import { setToken } from '@/utils/auth'

  defineOptions({
    name: 'login'
  })

  // 初始化操作
  const { appContext } = getCurrentInstance()
  const { config, $router, $Request } = appContext.config.globalProperties

  let formOptions = $ref({
      userName: 'admin',
      password: '123456',
  })

  let rules = $ref({
      userName: [
        { required: true, message: '请输入账户名', trigger: 'change' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'change' }
      ]
  })

  const ruleFormRef = $ref('ruleFormRef')
  const handleSubmit = () => {
      ruleFormRef.validate(valid => {
          if (valid) {
            $Request.commonApi.userLogin().then(resp => {
              if (resp.code === 0) {
                let { token } = resp.data
                setToken(token)
                $router.push('/home')
              }
            })            
          }
      })
  }

</script>

<style scoped lang="scss">
.login-page {
  width: 100%;
  height: 100%;
  background: #1b2991;

  .login-form {
    width: 400px;
    margin: 0 auto;
    padding: 30px 20px;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    border: 1px solid #ccc;
    background: #fff;
  }
}
</style>